<template>

    <button @click="awesome = !awesome">Toggle</button>
    <h1 v-if="awesome">Vue is awesome!</h1>
    <h1 v-else>Oh no 😥</h1>

    <button @click="typechange">Change</button>
    <div v-if="type === 'A'">A</div>
    <div v-else-if="type === 'B'">B</div>
    <div v-else-if="type === 'C'">C</div>
    <div v-else>Not A B C</div>

    <button @click="ok1 = !ok1">changeok1</button>
    <template v-if="ok1">
        <h1>Title</h1>
        <p>Paragraph 1</p>
        <p>Paragraph 2</p>
    </template>
    <button @click="ok2 = !ok2">changeok2</button>
    <h1 v-show="ok2">Hello!</h1>



</template>



<script setup>
import { computed, ref } from 'vue';
let awesome = ref(true)
let type = ref('A')
const typechange = computed(
    () => {
    if (type.value === 'A') {
        type.value = 'B'
    } else if (type.value === 'B') {
        type.value = 'C'
    } else if (type.value === 'C') {
        type.value = 'D'
    } else {
        type.value = 'A'
    }
})
let ok1 = ref(false)
let ok2 = ref(false)
</script>

<style></style>